<!--
 * @Author: your name
 * @Date: 2022-01-25 10:11:15
 * @LastEditTime: 2022-01-25 11:22:42
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /reaction/index.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="app">
        <div class="title">
            测试你的反应速度
        </div>
        <div class="desc">
            点击开始按钮或者按下enter键，当下方框内出现箭头时，请快速按下对应方向键，以测试您的反应速度
        </div>
        <button class="start">开始</button>
        <div class="container">
            <div class="container-arrows">
                <img src="./imgs/top.png" alt="" class="arrow-item arrow-top">
                <img src="./imgs/right.png" alt="" class="arrow-item arrow-right">
                <img src="./imgs/bottom.png" alt="" class="arrow-item  arrow-bottom">
                <img src="./imgs/left.png" alt="" class="arrow-item arrow-left">
            </div>
            <div class="container-text">本次速度 <span id="reaction-time"></span> ms</div>
        </div>
    </div>
    <div></div>
    <script src="./index.js"></script>
</body>

</html>